<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="utf-8">

    <title>叮叮书店</title>
    <!-- each length  160 ,height  60, top nav bar  -->
    <!--font size 24 height-->
    <!--shooping car height 40-->
    <!--    shang  x ia 10 -->
    <!--    font size  20  height gouwuche -->
    <!--    charachatoer to left 20 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>

    <meta name="viewport" content="width=device-width,initial-scale=1.0"/>

    <meta name="keywords" content="书店,叮叮书店,图书"/>

    <meta name="description" content="叮叮书店是一个销售书籍的网上书店."/>

    <meta name="robots" content="index,follow"/>
    <!--    https://www.cnblogs.com/guokaifeng/p/10993470.html-->
    <link rel="stylesheet" type="text/css" href="css/lunbo.css">

    <link rel="stylesheet" type="text/css" href="css/nav.css">
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <link rel="stylesheet" type="text/css" href="css/cart.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
     <link rel="stylesheet" type="text/css" href="css/newBookAndSale.css">
    <style type="text/css">

    </style>

</head>

<body>
<!--<a id="top"></a>-->
<header>
    <h1>叮叮书店</h1>
</header>
<nav>
    <div id="nav">
        <!--    ul>li*5>a[href="#"]   tab -->
        <!--    内容 {} ,光标在哪里他就在哪里生成-->
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">书籍分类</a>

                <!--            ul>li*3>a[href="#"]-->
                <ul>
                    <li><a href="#">编程语言</a></li>
                    <li><a href="#">数据库</a></li>
                    <li><a href="#">图形图像</a></li>
                </ul>
            </li>
            <li><a href="#">特殊期刊</a></li>
            <li><a href="#">联系我们</a></li>
            <li><a href="#">关于我们</a></li>
        </ul>
        <div class="cart-btn">
            <a id="cart-a" href="#">购物车</a>
        </div>
    </div>
</nav>
<div id="content-wrapper">
    <main>

        <div id="adv">
            <ul>
                <li class="lunbo1">
                    <span>1</span>
                    <div></div>
                </li>
                <li class="lunbo2">
                    <span>2</span>
                    <div></div>
                </li>
                <li class="lunbo3">
                    <span>3</span>
                    <div></div>
                </li>
                <li class="lunbo4">
                    <span>4</span>
                    <div></div>
                </li>
            </ul>

        </div>

        <section id="recommend">

            <span class="icon-book"></span>
<!--            <img class="book-brown" src="images/book_brown.png" alt="book_brown">-->
            <!--                <img src="images/">-->
            <h2>本周推荐</h2>
            <section class="recommend-book">
                <h3>《HTML5权威指南》</h3>
                <div class="content">
                    <div class="cover">
                        <a href="#"><img class="recommend-book-img" src="images/prod2.jpg" alt="HTML5权威指南"></a>
                    </div>
                    <div class="description">
                        <p>作为下一代Web标准，
                            <mark>HTML5</mark>
                            致力于为互联网开发者搭建更加便捷、开放的沟通平台。业界普遍认为，在未来几年内，
                            <mark>HTML5</mark>
                            无疑将成为移动互联网领域的主宰者。本书是系统学习网页设计和移动设计的参考图书。
                        </p>
                        <p>Adam Freeman，曾在多家名企担任高级职务，现为畅销技术图书作家，著有多部C#、.NET和Java方面的大部头作品。其中《ASP.NET
                            4高级程序设计（第4版）》、《精通ASP.NET
                            MVC
                            3框架（第3版）》销量均在同品种中名列前茅，备受读者推崇。Freeman专门为网页开发新手和网页设计师打造的经典参考书，这本书秉承作者的一贯风格，幽默风趣、简约凝练、逻辑性强，是广大Web开发人员的必读经典。</p>
                    </div>
                </div>


                <div class="cart-more"><a class="cart" href="cart.html">加入购物车</a>
                    <a class="more" href="details.html">详细内容</a></div>

            </section>


            <section class="recommend-book">
                <h3>《JavaScript权威指南》</h3>
                <div class="content">
                    <div class="cover">
                        <a href="#"><img class="recommend-book-img" src="images/prod3.jpg" alt="JavaScript权威指南"></a>
                    </div>
                    <div class="description">
                        <p>经典的JavaScript工具书，从1996年以来，本书已经成为JavaScript程序员心中的《圣经》。</p>
                        <p>David Flanagan，是一名程序员，也是一名作家 。他在O’Reilly出版的其他畅销书还包括《JavaScript Pocket Reference》、《The Ruby
                            Programming Language》、以及《Java in a
                            Nutshell》。David毕业于麻省理工学院，获得计算机科学与工程学位。他和妻子和孩子一起生活在西雅图和温哥华之间的美国太平洋西北海岸。</p>
                    </div>
                </div>
                <div class="cart-more"><a class="cart" href="cart.html">加入购物车</a>
                    <a class="more" href="details.html">详细内容</a></div>
                <!--1-->
            </section>
        </section>

        <!--最近新书-->
        <section id="new">
            <span class="icon-new"></span>
            <h2>最近新书</h2>
            <div class="content">
                <section class="book">
                    <h3>《HTML5+CSS3从入门到精通》</h3>
                    <div class="effect-1">
                        <div class="image-box">
                            <img src="images/prod4.jpg" alt="HTML5+CSS3从入门到精通">
                        </div>
                        <!--                            文字说明-->
                        <div class="text-desc">
                            <h3>《HTML5+CSS3从入门到精通》</h3>
                            <p>《
                                <mark>HTML5</mark>
                                +CSS3从入门到精通》通过基础知识+中小实例+综合案例的方式，讲述了用
                                <mark>HTML5</mark>
                                +CSS3设计构建网站的必备知识，相对于权威指南、高级程序设计、开发指南同类图书，本书是一本适合快速入手的自学教程。
                            </p>
                            <div class="cart-more"><a class="cart" href="cart.html">加入购物车</a>
                                <a class="more"
                                   href="#">详细内容</a>
                            </div>
                        </div>
                    </div>
                </section>
                <section class="book">
                    <h3>《响应式Web设计》</h3>
                    <div class="effect-1">
                        <div class="image-box">
                            <img src="images/prod5.jpg" alt="响应式Web设计">
                        </div>
                        <div class="text-desc">
                            <h3>《响应式Web设计》</h3>
                            <p>《响应式Web设计：
                                <mark>HTML5</mark>
                                和CSS3实战》将当前Web设计中热门的响应式设计技术与
                                <mark>HTML5</mark>
                                和CSS3结合起来，为读者全面深入地讲解了针对各种屏幕大小设计和开发现代网站的各种技术。《响应式Web设计：
                                <mark>HTML5</mark>
                                和CSS3实战》适合各个层次的Web开发和设计人员阅读。
                            </p>
                            <div class="cart-more">
                                <a class="cart" href="cart.html">加入购物车</a>
                                <a class="more" href="details.html">详细内容</a>
                            </div>
                        </div>
                    </div>
                </section>
            </div>
        </section>
        <!--最近促销-->
        <section id="sales">
            <span class="icon-sale"></span>
            <h2>最近促销</h2>
            <div class="content">
                <section class="book">
                    <h3>《HTML5和CSS3实例教程》</h3>
                    <div class="effect-1">
                        <div class="image-box">
                            <a href="#"><img class="promotion" src="images/prod1.jpg" alt="HTML5和CSS3实例教程"></a>
                        </div>
                        <div class="text-desc"><img src="images/sale.jpg" alt=""></div>
                        <div class="cart-more"><a class="cart" href="cart.html">加入购物车</a>
                            <a class="more" href="details.html">详细内容</a></div>
                    </div>
                </section>
                <section class="book">
                    <h3>《JavaScript权威指南》</h3>
                    <div class="effect-1">
                        <div class="image-box">
                            <a href="#"><img class="promotion" src="images/prod3.jpg" alt="JavaScript权威指南"></a>
                        </div>
                        <div class="text-desc"><img src="images/sale.jpg" alt=""></div>
                        <div class="cart-more"><a class="cart" href="cart.html">加入购物车</a>
                            <a class="more" href="details.html">详细内容</a></div>
                    </div>
                </section>
            </div>
        </section>


    </main>
    <aside>
        <div id="advert">
            <a href="#"><img src="images/ad1.jpg" alt="adv"></a>
            <a href="#"><img src="images/ad2.jpg" alt="adv"></a>
            <a href="#"><img src="images/ad3.jpg" alt="adv"></a>
        </div>
    </aside>
</div>

<footer>

</footer>
</body>

</html>

